<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="model" ref="form">
					<u-form-item label="标题" prop="title" borderBottom>
						<u--input v-model="model.title" border="none" placeholder="请输入..."></u--input>
					</u-form-item>

					<u-form-item label="简述" prop="description" borderBottom>
						<u--textarea placeholder="请输入..." v-model="model.description" count></u--textarea>
					</u-form-item>


					<u-form-item label="开始时间" prop="timeStart" borderBottom
						@click="showTimeStart = true; hideKeyboard()">
						<u--input v-model="model.timeStart" disabled disabledColor="#ffffff" placeholder="请选择..."
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item label="结束时间" prop="timeEnd" borderBottom @click="showTimeEnd = true; hideKeyboard()"
						ref="item1">
						<u--input v-model="model.timeEnd" disabled disabledColor="#ffffff" placeholder="请选择..."
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>

				<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>


				<u-datetime-picker :show="showTimeStart" :value="timeStart" mode="datetime" closeOnClickOverlay
					@confirm="timeStartConfirm" @cancel="timeStartClose" @close="timeStartClose"></u-datetime-picker>

				<u-datetime-picker :show="showTimeEnd" :value="timeEnd" mode="datetime" closeOnClickOverlay
					@confirm="timeEndConfirm" @cancel="timeEndClose" @close="timeEndClose"></u-datetime-picker>

				<u-toast ref="uToast"></u-toast>

				<u-loading-page loading-mode="spinner" :loading="loading" loading-text="正在添加..."></u-loading-page>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addSchedule
	} from '@/utils/vv-schedule.js'
	export default {
		data() {
			return {
				showDate: false,
				showTimeStart: false,
				showTimeEnd: false,
				loading: false,
				timeStart: Number(new Date()),
				timeEnd: Number(new Date()),
				model: {
					title: '',
					description: '',
					timeStart: '',
					timeEnd: '',
				},

				rules: {
					title: {
						type: 'string',
						required: true,
						message: '请填写标题',
						trigger: ['blur']
					},
					description: {
						type: 'string',
						required: true,
						message: '请填写简述',
						trigger: ['blur']
					},

					timeStart: {
						type: 'string',
						required: true,
						message: '请选择开始时间',
						trigger: ['change']
					},
					timeEnd: {
						type: 'string',
						required: true,
						message: '请选择结束时间',
						trigger: ['change']
					},
				},
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			timeStartClose() {
				this.showTimeStart = false
				this.$refs.form.validateField('timeStart')
			},
			timeStartConfirm(e) {
				this.showTimeStart = false
				this.timeStart = e.value
				this.model.timeStart = uni.$u.timeFormat(e.value, 'yyyy/mm/dd hh:MM')
				this.$refs.form.validateField('timeStart')
			},
			timeEndClose() {
				this.showTimeEnd = false
				this.$refs.form.validateField('timeEnd')
			},
			timeEndConfirm(e) {
				this.showTimeEnd = false
				this.timeEnd = e.value
				this.model.timeEnd = uni.$u.timeFormat(e.value, 'yyyy/mm/dd hh:MM')
				this.$refs.form.validateField('timeEnd')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					this.addScheduleFun()
					this.loading = true
				}).catch(errors => {
					uni.$u.toast('填写错误')
				})
			},

			async addScheduleFun() {
				const res = await addSchedule({
					title: this.model.title,
					description: this.model.description,
					dtstart: new Date(this.model.timeStart).getTime(),
					dtend: new Date(this.model.timeEnd).getTime(),
				})
				setTimeout(() => {
					this.loading = false
					if (res) {
						this.$refs.uToast.show({
							type: 'success',
							message: "添加日程成功",
						})
						this.$refs.form.resetFields()
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: "添加日程失败",
						})
					}
				}, 1000)
			},

			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss">
	.u-page {
		padding: 30rpx;
	}
</style>
